import React from 'react';
import { useRoutes, Navigate } from 'react-router-dom';

import LazyLoad from '../components/LazyLoad';

import Auth from './Auth';

const MyRouter = () => {
  const routers = useRoutes([
    {
      path: '/login',
      element: LazyLoad('Login'),
    },
    {
      path: '/film',
      element: LazyLoad('Films'),
      children: [
        { index: true, element: <Navigate to="/film/nowPlaying" /> },
        { path: 'nowPlaying', element: LazyLoad('Films/NowPlaying') },
        { path: 'comingSoon', element: LazyLoad('Films/ComingSoon') },
        { path: 'detail/:id', element: LazyLoad('Films/Detail') },
      ],
    },
    {
      path: '/cinema',
      element: LazyLoad('Cinema'),
    },
    {
      path: '/center',
      element: <Auth>{LazyLoad('Center')}</Auth>,
    },
    { index: true, element: <Navigate to="/film" /> },
    { path: '*', element: LazyLoad('NotFound') },
  ]);
  return routers;
};

export default MyRouter;
